<template>
  <view class="curriculum">
    <view class="curriculum_head">
      <view class="curriculum_item curriculum_item1" @click="handleOpen('/pages/elsePages/HK_bank_manage/index')">
        <view class="curriculum_name">慧考智学网课</view>
        <img src="/static/img/hui.png" alt="" class="curriculum_icon">
        <view class="curriculum_title">本月剩余扶持金</view>
        <view class="curriculum_money">
          <text>{{ userInfo.HuiKaoBalance }}</text>元
        </view>
      </view>
      <view class="curriculum_item curriculum_item2" @click="handleOpen('/pages/elsePages/liberalCode/index')">
        <view class="curriculum_name">丫题丫题库</view>
        <img src="/static/img/ya.png" alt="" class="curriculum_icon">
        <view class="curriculum_title">本月剩余扶持金</view>
        <view class="curriculum_money">
          <text>{{ userInfo.QuestionBalance }}</text>元
        </view>
      </view>
    </view>
    <view class="book_list" v-if="userInfo.UserType != 1 || (userInfo.UserType == 1 && userInfo.AllowOtherProduct)">
      <view class="book_item" v-for="item in bookList" :key="item.bookname" @click="handleOpen(item.url)">
        <view class="book_name">{{ item.bookname }}</view>
        <view class="book_icon">
          <text></text>
          <text></text>
        </view>
        <view class="buyrecord">
          <u-icon name="order" color="#818181" size="9"></u-icon>
          <text>购买记录</text>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 30rpx;padding-bottom: env(safe-area-inset-bottom);"></view>
  </view>
</template>
<script>
export default {
  data () {
    return {
      bookList: [
        // {
        // 	bookname: '丫题丫督学',
        // 	url: 'ya'
        // },
        // {
        // 	bookname: '丫题丫网课'
        // },
        {
          bookname: '金考典',
          url: '/pages/elsePages/JKD_bank_manage/index'
        },
        {
          bookname: '毕过题库',
          url: '/pages/elsePages/BG_bank_manage/index'
        },
        {
          bookname: '魔考大师',
          url: '/pages/elsePages/MK_bank_manage/index'
        },
        {
          bookname: '阿虎医考',
          url: '/pages/elsePages/AH_exam_manage/index'
        },
        {
          bookname: '考试宝典',
          url: '/pages/elsePages/BD_bank_manage/index'
        },
        {
          bookname: '考研专业课电子书',
          url: '/pages/elsePages/KY_bank_manage/index'
        }
      ],
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  created () {
    this.getUserInfo()
    if (!Object.values(this.userInfo).length) {
      uni.reLaunch({
        url: "/pages/index/noLogin"
      })
    }
  },
  methods: {
    //是否过期
    handleIsEndTime (time) {
      return new Date(time).getTime() < new Date().getTime()
    },
    async getUserInfo () {
      const res = await this.$http.get('wxuser/userinfo')
      this.$store.commit('setUserInfo', res.Data)
      uni.setStorageSync("userInfo", res.Data)
    },
    handleOpen (url) {
      if (this.userInfo.UserType == 0) {
        return this.$parent.handleOpenAuth()
      }
      if (this.userInfo.UserType == 1 && this.handleIsEndTime(this.userInfo.ProxyValidTime)) {
        return this.$parent.handleOpenAuth()
      }
      this.$gotoUrl(url)
    }
  },
}
</script>
<style lang="scss" scoped>
.curriculum {
  width: 100%;
  overflow: hidden;
}

.curriculum_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28rpx;
  box-sizing: border-box;
  margin-top: 38rpx;
}

.curriculum_item {
  width: 340rpx;
  height: 322rpx;
  border-radius: 12rpx;
  padding: 0 38rpx;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.curriculum_item1 {
  background-image: url('/static/img/bg1.png');
}

.curriculum_item2 {
  background-image: url('/static/img/bg2.png');
}

.curriculum_name {
  width: 100%;
  font-weight: bold;
  font-size: 32rpx;
  color: #3D4353;
  margin-top: 114rpx;
}

.curriculum_icon {
  width: 88rpx;
  height: 114rpx;
  position: absolute;
  left: 38rpx;
  top: -14rpx;
}

.curriculum_title {
  width: 100%;
  font-weight: bold;
  font-size: 24rpx;
  color: rgba(61, 67, 83, 0.7);
  margin-top: 28rpx;
}

.curriculum_money {
  width: 100%;
  font-weight: 500;
  font-size: 28rpx;
  color: #3D4353;
}

.curriculum_money text {
  font-weight: bold;
  font-size: 56rpx;
  color: #3D4353;
  margin-right: 2rpx;
}

.book_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 18rpx;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 4rpx;
}

.book_item {
  width: 224rpx;
  height: 288rpx;
  box-shadow: 0rpx 4rpx 12rpx rgba(50, 62, 86, 0.2);
  background-image: url('/static/img/book.png');
  background-size: 260rpx 324rpx;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 20rpx;
  margin-top: 26rpx;
  padding-left: 40rpx;
  padding-right: 28rpx;
  box-sizing: border-box;
  position: relative;
}

.buyrecord {
  position: absolute;
  left: 38rpx;
  bottom: 30rpx;
  display: flex;

  text {
    display: inline-block;
    margin-left: 6rpx;
    font-family: PingFang SC;
    font-size: 20rpx;
    color: #818181;
  }
}

.book_item:nth-child(3n) {
  margin-right: 0;
}

.book_name {
  width: 100%;
  font-weight: bold;
  font-size: 28rpx;
  color: #3D4353;
  margin-top: 36rpx;
}

.book_icon {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.book_icon text {
  width: 20rpx;
  height: 4rpx;
  background: #A2AEC4;
}

.book_icon text:last-child {
  background-color: #848FA5;
}
</style>